<template>
	<view class="gdxx-page">
		<!-- 总条数显示已取消 -->
		<!-- 股东信息列表 -->
		<view v-if="shareholderList.length > 0" class="shareholder-list" v-for="(item, index) in displayList" :key="index">
			<view class="shareholder-item">
				<view class="shareholder-avatar">
					<text class="avatar-text">{{ item.stockName ? item.stockName.charAt(0) : '股' }}</text>
				</view>
				<view class="shareholder-info">
					<text class="shareholder-name">{{ item.stockName || '暂无' }}</text>
					<view class="info-grid">
						<view class="info-row">
							<view class="info-item">
								<text class="info-label">持股比例</text>
								<text class="info-value">{{ (item.stockPercent*100).toFixed(2) || '-' }}%</text>
							</view>
							<view class="info-item">
								<text class="info-label">股东类型</text>
								<text class="info-value">{{ item.stockType || '-' }}</text>
							</view>
						</view>
						<view class="info-row">
							<view class="info-item">
								<text class="info-label">认缴出资</text>
								<text class="info-value">{{ item.totalShouldCapi || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">实缴出资</text>
								<text class="info-value">{{ item.totalShouldCapi || '-' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 没有更多数据状态 -->
		<view v-if="!hasMore && shareholderList.length > 0" class="no-more-container">
			<text class="no-more-text">没有更多数据了</text>
		</view>
		
		<!-- 空数据状态 -->
		<view v-else-if="shareholderList.length === 0 && !loading" class="empty-container">
			<text class="empty-text">暂无股东信息</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 股东信息数据
const shareholderList = ref([])
// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const hasMore = ref(true)
const totalData = ref([])

// 计算当前显示的数据
const displayList = computed(() => {
	return shareholderList.value
})

// 获取股东信息
const fetchShareholderInfo = () => {
	console.log('股东信息页面已加载')
	
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options
	
	// 获取gudongInfo参数
	if (options.gudongInfo) {
		try {
			const gudongInfo = JSON.parse(decodeURIComponent(options.gudongInfo))
			console.log('接收到的gudongInfo:', gudongInfo)
			// 保存所有数据
			totalData.value = gudongInfo || []
			// 初始化显示前10条数据
			loadDataByPage(1)
		} catch (error) {
			console.error('解析gudongInfo失败:', error)
			uni.showToast({
				title: '参数解析失败',
				icon: 'none'
			})
			shareholderList.value = []
			totalData.value = []
			hasMore.value = false
		}
	} else {
		console.log('未接收到gudongInfo参数')
		shareholderList.value = []
		totalData.value = []
		hasMore.value = false
	}
}

// 按页码加载数据
const loadDataByPage = (page) => {
	const startIndex = (page - 1) * pageSize.value
	const endIndex = startIndex + pageSize.value
	const newData = totalData.value.slice(startIndex, endIndex)
	
	if (page === 1) {
		// 第一页时直接替换数据
		shareholderList.value = newData
	} else {
		// 后续页时追加数据
		shareholderList.value = [...shareholderList.value, ...newData]
	}
	
	// 判断是否还有更多数据
	hasMore.value = endIndex < totalData.value.length
	loading.value = false
}

// 下拉刷新
const onPullDownRefresh = () => {
	console.log('下拉刷新')
	currentPage.value = 1
	loading.value = true
	// 重新加载第一页数据
	setTimeout(() => {
		loadDataByPage(1)
		uni.stopPullDownRefresh()
	}, 500)
}

// 上拉加载更多
const onReachBottom = () => {
	console.log('上拉加载更多')
	if (loading.value || !hasMore.value) return
	
	loading.value = true
	currentPage.value++
	// 延迟模拟加载过程
	setTimeout(() => {
		loadDataByPage(currentPage.value)
	}, 500)
}

// 暴露方法给页面
defineExpose({
	onPullDownRefresh,
	onReachBottom
})

onMounted(() => {
	console.log('股东信息页面挂载完成')
	fetchShareholderInfo()
})
</script>

<style lang="scss" scoped>
.gdxx-page {
	min-height: 100vh;
	background-color: #F4F5F7;
	padding: 22rpx 24rpx;
	box-sizing: border-box;
}

.total-count {
	padding: 20rpx 0;
	margin-bottom: 10rpx;
}

.count-text {
	font-family: 'Alibaba PuHuiTi', sans-serif;
	font-weight: 400;
	font-size: 26rpx;
	color: #666666;
}

.shareholder-list {
	display: flex;
	flex-direction: column;
	gap: 29rpx;
	align-items: center;
}

.shareholder-item {
	width: 704rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	display: flex;
	align-items: flex-start;
	padding:32rpx 24rpx 22rpx 39rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}

.shareholder-avatar {
	width: 62rpx;
	height: 62rpx;
	background: #2B6FEA;
	border-radius: 27rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	// margin-top: 2rpx;
    text-align: center;
    line-height: 62rpx;
}

.avatar-text {
	font-weight: 400;
	font-size: 30rpx;
	color: #FFFFFF;
}

.shareholder-info {
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.shareholder-name {
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	margin-bottom: 16rpx;
}

.info-grid {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-row {
	display: flex;
	justify-content: space-between;
}

.info-item {
	display: flex;
	flex-direction: column;
	flex: 1;
	
	&:first-child {
		margin-right: 12rpx;
	}
}

.info-label {
	font-weight: 400;
	font-size: 24rpx;
	color: #9B9B9B;
	margin-bottom: 4rpx;
}

.info-value {
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}

.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	
	.empty-text {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
	
	.loading-text {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}
}

.no-more-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
	
	.no-more-text {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 400;
		font-size: 26rpx;
		color: #cccccc;
	}
}
</style>
